import React, { Component } from 'react'
import url from '../../config/url'
import req from '../../http/req'
import Pie from './echars/Pie'
import '../../assets/css/welcome.css'
export default class Welcome extends Component {
  state = {
    // 来源
    accessFrom: [],
    // 区域
    area: [],
    // 性别
    gender: []
  }
  componentDidMount() {
    req.get(url.GetData).then((res) => {
      // console.log(res)
      const { accessFrom, area, gender } = res.data.data
      // 数据请求回来后,并存储到state中,再去渲染图表 回调函数
      this.setState({ accessFrom, area, gender })
    })
  }
  render() {
    return (
      <div id="main">
        <Pie id="pie1" text="用户性别分布" name="性别" data={this.state.gender}></Pie>
        <Pie id="pie2" text="用户区域分布" name="区域" data={this.state.area}></Pie>
        <Pie id="pie3" text="用户来源分布" name="来源" data={this.state.accessFrom} legend={false}></Pie>
        <Pie id="pie4" text="用户区域分布" name="区域" data={this.state.area}></Pie>
        <Pie id="pie5" text="用户性别分布" name="性别" data={this.state.gender}></Pie>

      </div>
    )
  }
}
